<!-- 首页 -->
<template>
  <div class='body'>
    <div class="topSlider">
      <div class="buttonBox">
        <el-button type="primary" @click="creat">新建流程</el-button>
        <el-button type="info">导入流程</el-button>
      </div>
      <el-input v-model="input" class="searchInput" placeholder="输入流程名称模糊搜索流程"></el-input>
      <el-button type="primary">搜索</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="流程名称">
          <template slot-scope="scope">
            <div class="inputBox" style="cursor: pointer;" @click="editInput(scope.row)">
              <span v-if="!scope.row.isInput">{{ scope.row.date }}<i class="el-icon-edit"
                  style="display: none;color: #1890ff;"></i></span>
            </div>
            <el-input ref="myInput" v-if="scope.row.isInput" v-model="scope.row.date" @blur="handleQuery(scope.row)"
              @keyup.enter.native="handleQuery(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="组件版本">
        </el-table-column>
        <el-table-column prop="address" label="更新时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success">运行</el-button>
            <el-button size="mini" type="primary">编辑</el-button>
            <el-button size="mini" type="warning">复制</el-button>
            <el-button size="mini" type="info">详情</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      input: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isInput: false,
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        isInput: false,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        isInput: false,
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        isInput: false,
      }]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleQuery(e) {
      e.isInput = false;
    },
    editInput(e) {
      e.isInput = true;
    },
    creat(){
      this.$router.push('/manger/creat');
    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.body {
  padding: 20px;
}

.el-input {
  width: 400px;
}

.topSlider {
  display: flex;
  margin-bottom: 20px;
}

.searchInput {
  margin-left: 200px;
  margin-right: 20px;
}

::v-deep .el-table__cell {
  .cell {
    height: 40px !important;
    line-height: 40px !important;
  }
}

::v-deep .inputBox:hover>span>.el-icon-edit {
  display: inline-block !important;
  ;
}
</style>



<!-- <template>
  <div>
    <button @click="init()">初始化</button>
    <button @click="send('测试链接')">发消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: "ws://localhost:10988/socket/picker",
      socket: ""
    }
  },
  mounted() {
    // 初始化
    // this.init()
  },
  methods: {
    init: function () {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      console.log(msg.data)
    },
    // 发送消息给被连接的服务端 
    send: function (params) {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    }
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close
  }
}
</script> -->